<!DOCTYPE html>
<html>
<head>
    <style>
        .array-container {
            display: flex;
            align-items: flex-end;
            height: 300px;
            padding: 20px;
            gap: 2px;
        }
        .array-bar {
            width: 30px;
            background-color: #90CAF9;
            transition: all 0.3s;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 5px;
            font-size: 12px;
            color: #333;
        }
    </style>
</head>
<body style="background: #f0f0f0; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh;">
    <div class="array-container">
        <div class="array-bar" style="height: 30px;">3</div>
        <div class="array-bar" style="height: 220px;">44</div>
        <div class="array-bar" style="height: 190px;">38</div>
        <div class="array-bar" style="height: 25px;">5</div>
        <div class="array-bar" style="height: 235px;">47</div>
        <div class="array-bar" style="height: 75px;">15</div>
        <div class="array-bar" style="height: 180px;">36</div>
        <div class="array-bar" style="height: 130px;">26</div>
        <div class="array-bar" style="height: 135px;">27</div>
        <div class="array-bar" style="height: 10px;">2</div>
        <div class="array-bar" style="height: 230px;">46</div>
        <div class="array-bar" style="height: 20px;">4</div>
        <div class="array-bar" style="height: 95px;">19</div>
        <div class="array-bar" style="height: 250px;">50</div>
        <div class="array-bar" style="height: 240px;">48</div>
    </div>
    <script>
        const bars = document.querySelectorAll('.array-bar');
        let values = Array.from(bars).map(bar => parseInt(bar.textContent));
        
        async function quickSort(start = 0, end = values.length - 1) {
            if (start >= end) return;
            
            // 选择基准值
            const pivot = values[end];
            bars[end].style.backgroundColor = '#FF4081';
            await new Promise(resolve => setTimeout(resolve, 500));
            
            let i = start - 1;
            
            for (let j = start; j < end; j++) {
                bars[j].style.backgroundColor = '#FF9800';
                await new Promise(resolve => setTimeout(resolve, 200));
                
                if (values[j] < pivot) {
                    i++;
                    // 交换元素
                    [values[i], values[j]] = [values[j], values[i]];
                    [bars[i].style.height, bars[j].style.height] = 
                    [bars[j].style.height, bars[i].style.height];
                    [bars[i].textContent, bars[j].textContent] = 
                    [bars[j].textContent, bars[i].textContent];
                }
                
                bars[j].style.backgroundColor = '#90CAF9';
            }
            
            // 将基准值放到正确的位置
            i++;
            [values[i], values[end]] = [values[end], values[i]];
            [bars[i].style.height, bars[end].style.height] = 
            [bars[end].style.height, bars[i].style.height];
            [bars[i].textContent, bars[end].textContent] = 
            [bars[end].textContent, bars[i].textContent];
            
            bars[end].style.backgroundColor = '#90CAF9';
            bars[i].style.backgroundColor = '#4CAF50';
            
            await Promise.all([
                quickSort(start, i - 1),
                quickSort(i + 1, end)
            ]);
        }

        setTimeout(quickSort, 1000);
        setInterval(() => {
            // 重置颜色和位置
            values = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
            bars.forEach((bar, index) => {
                bar.style.backgroundColor = '#90CAF9';
                bar.style.height = `${values[index] * 5}px`;
                bar.textContent = values[index];
            });
            quickSort();
        }, 15000); // 每15秒重新开始
    </script>
</body>
</html> 